<!-- 个人中心 -->
<template>
  <div class="mine-box" @click="goAccount">
    <div class="mine-box-left">
      <div>
        <img :src="this.$store.state.HeadPortrait" alt />
      </div>
    </div>
    <div class="mine-box-center">
      <h5 v-if="show">{{user_id}}</h5>
      <h5 v-else>未登陆</h5>
    </div>
    <div class="mine-box-right">
      <div>></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      user_id: "",
      HeadPortrait: ""
    };
  },
  methods: {
    goAccount() {
      console.log("跳转个人信息理");
      this.$router.push("/pim");
    },
    async receiveInfor() {
      console.log(131);
      let user_id = window.localStorage.getItem("user_id");
      let status = "user";
      try {
        await this.$http({
          method: "post",
          url: "index/web/doSelfInfos",
          headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            user_id,
            status
          }
        })
          .then(res => {
            console.log(res);
            const myInfor = res.data;
            if (myInfor.State.Code == 200) {
              this.HeadPortrait = myInfor.data.avatar;
            }
          })
          .catch(err => {
            console.log(err);
          });
      } catch (error) {
        console.log("获取个人资料接口出现了问题...");
      }
    }
  },
  mounted() {
    if (window.localStorage.getItem("user_id")) {
      this.show = true;
      this.user_id = window.localStorage.getItem("user_id");
      console.log(this.show);
    } else {
      this.show = false;
    }
  },
  created() {
    this.receiveInfor();
  }
};
</script>
<style lang='scss' scoped>
.mine-box {
  width: 100%;
  height: 4.0541rem;
  background-color: rgba($color:rgb(25, 137, 250), $alpha: 0.3);
  display: flex;
  align-items: center;
  .mine-box-left {
    flex: 2;
    display: flex;
    justify-content: center;
    div {
      width: 1.7297rem;
      height: 1.7297rem;
      background-color: #fff;
      border-radius: 50%;
      margin-left: 0.9459rem;
      img {
        width: 100%;
      }
    }
  }
  .mine-box-center {
    flex: 3;
    h5 {
      margin-bottom: 0.5405rem;
    }
  }
  .mine-box-right {
    flex: 1;
    div {
      margin-left: 0.9459rem;
    }
  }
}
</style>